// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// States and transitions from RFC 793
var states = [ "XXX企业提出问题", "镇区是否受理", "答复企业并解释未受理原因", "镇区层面能否解决",
               "报市经信委", "是否需要市领导会办", "市领导专题会办",
               "镇区办理并及时反馈", "交办职能部门", "职能部门办理并及时反馈", "销号" ];

// Automatically label each of the nodes
states.forEach(function(state) { g.setNode(state, { label: state }); });

// Set up the edges
g.setEdge("XXX企业提出问题",     "镇区是否受理",     { label: "提交申请" });
g.setEdge("镇区是否受理",     "答复企业并解释未受理原因",   { label: "否" });
g.setEdge("镇区是否受理",     "镇区层面能否解决",   { label: "是" });
// g.setEdge("镇区是否受理",     "XXX企业提出问题",     { label: "反馈" });
// g.setEdge("答复企业并解释未受理原因",   "是否需要市领导会办",  { label: "反馈" });
// g.setEdge("答复企业并解释未受理原因",   "报市经信委",      { label: "rcv ACK of SYN" });
g.setEdge("答复企业并解释未受理原因",   "销号",      { label: " " });
// g.setEdge("镇区层面能否解决",   "答复企业并解释未受理原因",   { label: "rcv SYN" });
g.setEdge("镇区层面能否解决",   "报市经信委",      { label: "否" });
g.setEdge("镇区层面能否解决",   "镇区办理并及时反馈",     { label: "是" });
g.setEdge("报市经信委",      "是否需要市领导会办",  { label: "是" });
g.setEdge("报市经信委",      "镇区办理并及时反馈", { label: "打回镇区" });
g.setEdge("是否需要市领导会办",  "市领导专题会办",  { label: " " });
g.setEdge("是否需要市领导会办",  "交办职能部门",    { label: "否" });
// g.setEdge("反馈 WAIT", "LAST-ACK",   { label: "反馈" });
g.setEdge("市领导专题会办",  "交办职能部门",  { label: " " });
g.setEdge("市领导专题会办",  "报市经信委",  { label: " " });
g.setEdge("交办职能部门",  "职能部门办理并及时反馈",  { label: " " });
g.setEdge("交办职能部门",  "报市经信委",  { label: "打回经信委" });
g.setEdge("职能部门办理并及时反馈",  "销号",  { label: " " });
g.setEdge("镇区办理并及时反馈",    "销号",  { label: " " });
// g.setEdge("LAST-ACK",   "XXX企业提出问题",     { label: "rcv ACK of FIN" });
// g.setEdge("销号",  "XXX企业提出问题",     { label: "处理结束，反馈企业" });

// Set some general styles 圆角
g.nodes().forEach(function(v) {
  var node = g.node(v);
  node.rx = node.ry = 5;
});

// Add some custom colors based on state
g.node('XXX企业提出问题').style = "fill: #f77";
g.node('镇区是否受理').style = "fill: red";

var svg = d3.select("svg"),
    inner = svg.select("g");

// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
      inner.attr("transform", "translate(" + d3.event.translate + ")" +
                                  "scale(" + d3.event.scale + ")");
    });
svg.call(zoom);

// Create the renderer
var render = new dagreD3.render();

// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var initialScale = 0.75;
zoom
  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
  .scale(initialScale)
  .event(svg);
svg.attr('height', g.graph().height * initialScale + 40);


var g = document.getElementsByClassName("node")[0];
g.onclick = function () {
  alert(1);
}